import React, { Component } from 'react';
import './style.css'

class SingerSort extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
             letters:[],
             singerSort: [
                { name: '华语男', cat: 1001 },
                { name: '华语女', cat: 1002 },
                { name: '华语组合', cat: 1003 },
                { name: '欧美男', cat: 2001 },
                { name: '欧美女', cat: 2002 },
                { name: '欧美组合', cat: 2003 },
                { name: '日本男', cat: 6001 },
                { name: '日本女', cat: 6002 },
                { name: '日本组合', cat: 6003 },
                { name: '韩国男', cat: 7001 },
                { name: '韩国女', cat: 7002 },
                { name: '韩国组合', cat: 7003 },
                { name: '其他男歌手', cat: 4001 },
                { name: '其他女歌手', cat: 4002 },
                { name: '其他组合', cat: 4003 },
            ]
        }
    }

    componentDidMount(){
        let code = []
        for (var i = 0; i < 26; i++) {
            code.push(String.fromCharCode(65 + i))
        }
        this.setState({
            letters: code
        })
    }

    handleLettersClick=(v)=>{
        return()=>{
            this.props.getSort(v)
            // console.log(this);
        }
    }
    handleSingerClick=(v)=>{
        return()=>{
            this.props.getLetters(v)
            // console.log(this);
        }
    }

    render() {
        // console.log(this.props);
        return (
            
            <div className="singer-container">
                    <div className="type">
                    <div className="singer-sort">
                            <div className="sort">
                                <div className="title">分类（默认热门）:</div>
                                {
                                    this.state.singerSort.map((v, i) => {
                                        return <div onClick={this.handleSingerClick(v.cat)} key={i}>{v.name}</div>
                                    })
                                    // onClick={this.handleSingerClick(v.cat)}
                                }
                            </div>
    
                        </div>
                        <div className="singer-letters">
                            <div className="letters">
                                <div className="title">首字母:</div>
                                {
                                    this.state.letters.map((v, i) => {
                                        return <div onClick={this.handleLettersClick(v)} key={i}>{v}</div>
                                    })
                                }
                            </div>
    
                        </div>
                    </div>
                    <div className="box"></div>
                </div>
        );
    }
}

export default SingerSort;